<template>
  <div>
   <el-form :inline="true" :mode="queryParams">
    <section class="justify-align">
      <div>
        <el-form-item>
          <el-button v-if="checkAuthority('/equilable/type/add')" type="primary" @click="handleAdd">新增设备标签类型</el-button>
        </el-form-item>
      </div>
      <div>
        <el-form-item>
          <el-input clearable placeholder="请输入标签名称" v-model="queryParams.labelTypeName"></el-input>
        </el-form-item>
        <el-form-item class="searchBtn">
          <el-button v-if="checkAuthority('/select')" type="primary" @click="handleSearch">查询</el-button>
        </el-form-item>
      </div>
    </section>
   </el-form>
   <el-table :data="tableData" style="width: 100%">
    <el-table-column type="index" label="序号" width="80" prop="index">
      <template slot-scope="scope">
        {{ queryParams.pageSize * (queryParams.current - 1) + scope.$index + 1 }}
      </template>
    </el-table-column>
    <el-table-column prop="labelTypeNumber" label="设备标签类型编号"></el-table-column>
    <el-table-column prop="labelTypeName" label="标签类型名称"></el-table-column>
    <el-table-column label="操作">
      <template slot-scope="scope">
        <el-button v-if="checkAuthority('/equilable/type/editor')" type="text" size="small" @click="handleEdit(scope.row)">编辑</el-button>
        <el-button v-if="checkAuthority('/equilable/type/delete')" type="text" size="small" @click="handleRemove(scope.row)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
  <el-pagination
    v-if="tableData.length > 0"
    style="text-align: right"
    layout="total, prev, pager, next"
    @current-change="pageHandleChange"
    :current-page="queryParams.current"
    :page-size="queryParams.pageSize"
    :total="totalPageNum"
  ></el-pagination>
  <tagType-modal v-if="tagTypeObj.show" :tagTypeObj="tagTypeObj" @ok="handleOk" @close="handleClose" />
  </div>
</template>

<script>
import tagTypeModal from './tagTypeModal'
import {
  addUpdateLabelType,
  getTagTypeTableData,
  deleteTagType
} from '@/views/children/safety/js/device'
import { checkAuthority } from '@/utils/btnPermission' // 页面按钮权限
export default {
  components: {
    tagTypeModal
  },
  data: () => ({
    queryParams: {
      current: 1,
      pageSize: 10,
      labelTypeName: ''
    },
    deviceOneTypeList: [],
    deviceTwoTypeList: [],
    totalPageNum: 0,
    tableData: [],
    tagTypeObj: {
      title: '新增设备标签类型',
      show: false,
      row: {}
    }
  }),
  methods: {
    checkAuthority,
    handleSearch () {
      this.queryParams.current = 1
      this.getTableData()
    },
    pageHandleChange (page) {
      this.queryParams.current = page
      this.getTableData()
    },
    async handleOk (obj) {
      const { labelTypeName, labelTypeNumber, labelTypeId, title } = obj
      // 新增、编辑
      const params =
        title === '新增设备标签类型' ? { labelTypeName, labelTypeNumber } : { labelTypeName, labelTypeNumber, labelTypeId }
      try {
        const res = await addUpdateLabelType(params)
        if (res.code === 0) {
          this.handleClose()
          this.getTableData()
        }
      } catch (e) {}
    },
    handleClose () {
      this.tagTypeObj.show = false
    },
    handleAdd () {
      // 新增
      this.tagTypeObj.title = '新增设备标签类型'
      this.tagTypeObj.show = true
      this.tagTypeObj.row = {}
    },
    handleEdit (row) {
      // 编辑
      this.tagTypeObj.title = '编辑设备标签类型'
      this.tagTypeObj.show = true
      this.tagTypeObj.row = row
    },
    handleRemove (row) {
      // 行内删除
      const { labelTypeId } = row
      this.$confirm('确定删除该标签类型吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        const res = await deleteTagType(labelTypeId)
        if (res.code === 0) {
          this.getTableData()
          this.$message.success('删除成功！')
        } else {
          this.$message.error(res.msg + '删除失败！')
        }
      })
    },
    async getTableData () {
      // 获取列表数据
      try {
        const res = await getTagTypeTableData({
          ...this.queryParams
        })
        if (res.code === 0) {
          this.tableData = res.data.records
          this.totalPageNum = res.data.total
        }
      } catch (e) {}
    }
  },
  mounted () {
    this.handleSearch()
  }
}
</script>

<style lang="scss" scoped></style>
